// 赛题初始化面板
import { Modal, Form, Input, Select,Row,Col,Space,Button,message } from 'antd';
import { useIntl } from "umi";
import React, { useState, useEffect, useRef } from 'react';
import { queryTeamRoughInfoList } from '@/services/team';
import { initCompetitionForIP } from '@/services/competition';
import { SELECT_LABEL, SELECT_VALUE } from '@/constants';
const CompetitionInitPanel = ({ record, closePanel }) => {
    const intl = useIntl();
    const [form] = Form.useForm(record);
    const [open, setOpen] = useState(true);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [teamSelectData, setTeamSelectData] = useState();
    const [selectLoading, setSelectLoading] = useState(true);
    useEffect(() => {
        initTeamSelectData()
    }, [])
    const handleOk = async (data) => {
        setConfirmLoading(true);
        data.unCode = record.unCode;
        await initCompetitionForIP(data).then(res => {
            if (res.success) {
                message.success(res.msg)
                setConfirmLoading(false)
                handleCancel()
            } else {
                setConfirmLoading(false)
            }
        }).catch(err => {
            console.log(err);
            setConfirmLoading(false)
        })
    }
    const handleCancel = () => {
        setOpen(false);
        closePanel()
    };
    const initTeamSelectData = async () => {
        await queryTeamRoughInfoList().then(res => {
            if (res.success) {
                setTeamSelectData(res.data)
                setSelectLoading(false)
            }
        }).catch(err => {
            setSelectLoading(false)
        })
    }
    return (
        <Modal
            title={'初始化赛事'}
            open={open}
            onOk={handleOk}
            onCancel={handleCancel}
            destroyOnClose
            width={500}
            footer={false}
        >
            <Form
                name={form}
                style={{
                    maxWidth: 400,
                }}
                onFinish={handleOk}
                labelCol={{ span: 7 }}
                wrapperCol={{ span: 17 }}
                initialValues={form}
                autoComplete="on"
            >
                <Form.Item
                    label="赛事名称"
                    name="name"
                >
                    <Input disabled placeholder="请输入赛题名称" />
                </Form.Item>
                <Form.Item
                    label="起始IP地址"
                    name="startIpAddress"
                    rules={[
                        {
                            required: true,
                            message: "请输入起始IP地址",
                        },
                    ]}
                >
                    <Input placeholder="请输入起始IP地址" />
                </Form.Item>
                <Form.Item
                    label="截止IP地址"
                    name="endIpAddress"
                    rules={[
                        {
                            required: true,
                            message: "请输入截止IP地址",
                        },
                    ]}
                >
                    <Input placeholder="请输入截止IP地址" />
                </Form.Item>
                <Form.Item
                    label="参赛队伍"
                    name="teamUnCodes"
                    rules={[
                        {
                            required: true,
                            message: "请选择参赛队伍",
                        },
                    ]}
                >
                    <Select
                        mode="multiple"
                        loading={selectLoading}
                        fieldNames={{ label: SELECT_LABEL, value: SELECT_VALUE }}
                        showSearch
                        placeholder="查询并选择队伍"
                        filterOption={(input, option) =>
                            (option?.name ?? '').toLowerCase().includes(input.toLowerCase())
                        }
                        options={teamSelectData}
                    />
                </Form.Item>
                <Row justify="end">
                    <Col>
                        <Space>
                            <Button htmlType="button" onClick={handleCancel}>
                                {intl.formatMessage({
                                    id: 'component.button.cancel',
                                })}
                            </Button>
                            <Button type="primary" htmlType="submit" loading={confirmLoading}>
                                {intl.formatMessage({
                                    id: 'component.button.submit',
                                })}
                            </Button>
                        </Space>
                    </Col>
                </Row>
            </Form>
        </Modal>
    );
};
export default CompetitionInitPanel;